<template>
 <view>
	<view>
		<em-header-inset></em-header-inset>
		<swiper class="swiper px-3 mt-3" style="width: 750rpx;border-radius: 20rpx;" :style="{ 'height': `${systemInfo.windowHeight*0.6}px`}" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item  v-for="(val,index) in user.banner" :key="index">
				<view class="flex-1 flex justify-center" style="width: 100%;border-radius: 20rpx;">
					<image :src="config.imgUrl + val" class="" style="width: 100%;border-radius: 20rpx;" :style="{ 'height': `${systemInfo.windowHeight*0.6}px`}"  mode="aspectFill"></image>
				</view>
			</swiper-item>		
		</swiper>
	</view>
	<!-- <em-like-effect></em-like-effect> -->
	<view class="mt-3 mx-3 flex flex-column align-center justify-center ">
		<view class="px-2 py-3 bg-white" style="width: 100%;border-radius: 20rpx;box-shadow: 1px 1px 10px #F5F5F5">
			<view class="flex flex-row align-center">
				<text style="font-size: 42rpx;font-weight: bold;">{{user.nickname}}</text>
				<view class="ml-2">
					<view class="flex flex-row align-center px-1 py-1 auth-button" style="background-image:linear-gradient(to right, #3d86f4 0%,#5F9DFC 70%,#d1e5fd 100%);border-radius: 50rpx;">
						<image src="@/static/icon/common/chat-renzhen.png" style="width: 30rpx;height: 30rpx;"></image>
						<text class="" style="font-size: 24rpx;color: #fff;line-height:30rpx;margin-left: 5rpx;">已实名</text>
					</view>
				</view>
			</view>
			<view class="flex mt-1 flex-row  " >
				<view class="flex flex-row align-center flex-1  py-2" style="border-radius: 15rpx;">
					<view class="position-absolute " style="top: 0;">
						<em-icon style="font-size: 88rpx;color:#E7E6EB;line-height: 52rpx;" :unicode="'\uec51'"></em-icon>
					</view>
					<text class="" style="font-size: 32rpx;color: #59595C;line-height:30rpx;">{{user.about||"找一个深爱的，最爱的人，来告别单身！"}}</text>
					
				</view>
			</view>
			<view class="flex flex-row mt-1 border-bottom pb-3">
				<view class="flex flex-row align-center px-2 py-1" style="background-color: #F5F5F5;border-radius: 50rpx;">
					<text class="ml-1" style="font-size: 24rpx;color: #59595C;line-height:30rpx;">IP：{{user.area}}</text>
				</view>
				<view v-if="user.latitude>0" class="flex flex-row align-center px-2 py-1 ml-1" style="background-color: #F5F5F5;border-radius: 50rpx;">
					<image src="@/static/icon/common/dinwei.png" style="width: 30rpx;height: 30rpx;"></image>
					<text class="ml-1" style="font-size: 24rpx;color: #59595C;line-height:30rpx;">距您 {{transformDistance(user)}} km</text>
				</view>
			</view>
			
			<view class="flex flex-row align-center">
				<view class="pt-2">
					<view class="flex flex-row align-center mt-1" style="border-radius: 20rpx;">
						<!-- <image src="@/static/icon/common/chat-age.png" style="width: 30rpx;height: 30rpx;"></image> -->
						<view style="background-color: #E7E6EB;border-radius: 20rpx;width: 15rpx;height: 15rpx;"></view>
						<view class="flex flex-row align-center" >
							<view class="ml-1" :style="{'background-color':user.gender==2?'#F37E7D':'#10AEFF;'}" 
							style="border-top-right-radius: 10rpx;border-bottom-left-radius: 10rpx;border-bottom-right-radius: 4rpx;border-top-left-radius: 4rpx;padding: 5rpx 10rpx;">
								<em-icon v-if="user.gender==2" style="font-size: 18rpx;color: #fff;line-height: 22rpx;" :unicode="'\uf2ce'"></em-icon>
								<em-icon v-else style="font-size: 18rpx;color:#fff;line-height: 22rpx;" :unicode="'\uef2e'"></em-icon>
							</view>
						</view>
						<text class="ml-1" style="font-size: 28rpx;color: #59595C;">98年·水瓶座</text>
						<text class="ml-1" style="font-size: 28rpx;color: #59595C;">156cm·45kg</text>
					</view>
					<!-- <view class="flex flex-row align-center px-2 mt-1" style="border-radius: 20rpx;">
						<text style="font-size: 28rpx;color: #A0A0A0;">156cm·45kg</text>
					</view> -->
					<view class="flex flex-row align-center mt-1" style="border-radius: 20rpx;">
						<!-- <image src="@/static/icon/common/chat-xianzhuzhi.png" style="width: 30rpx;height: 30rpx;"></image> -->
						<view style="background-color: #E7E6EB;border-radius: 20rpx;width: 15rpx;height: 15rpx;"></view>
						<text class="ml-1" style="font-size: 28rpx;color: #59595C;">现居广州·广东汕尾人</text>
					</view>
					<view class="flex flex-row align-center mt-1" style="border-radius: 20rpx;">
						<!-- <image src="@/static/icon/common/chat-xueli.png" style="width: 30rpx;height: 30rpx;"></image> -->
						<view style="background-color: #E7E6EB;border-radius: 20rpx;width: 15rpx;height: 15rpx;"></view>
						<text class="ml-1" style="font-size: 28rpx;color: #59595C;">本科·广东外语外贸大学</text>
					</view>
					<view class="flex flex-row align-center mt-1" style="border-radius: 20rpx;">
						<!-- <image src="@/static/icon/common/chat-job.png" style="width: 30rpx;height: 30rpx;"></image> -->
						<view style="background-color: #E7E6EB;border-radius: 20rpx;width: 15rpx;height: 15rpx;"></view>
						<text class="ml-1" style="font-size: 28rpx;color: #59595C;">运营 ·金利来</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- <view class="mt-3 mx-3 flex flex-column align-center justify-center ">
		<view class="px-2 py-3 bg-white" style="width: 100%;border-radius: 20rpx;box-shadow: 1px 1px 10px #F5F5F5">
			<view class="flex flex-row align-center">
				<text style="font-size: 32rpx;font-weight: bold;">认证信息</text>
			</view>
			<view class="flex flex-row mt-1  pb-3 mt-3">
				<view class="flex flex-row align-center px-2 py-1" style="background-color: #F5F5F5;border-radius: 20rpx;">
					<image src="@/static/icon/common/dinwei.png" style="width: 30rpx;height: 30rpx;"></image>
					<text class="ml-1" style="font-size: 24rpx;color: #59595C;line-height:30rpx;">距你10km·天河区</text>
				</view>
			</view>
		</view>
	</view> -->
	
	<view class="mt-3 mx-3 flex flex-column align-center justify-center ">
		<view class="px-2 py-3 bg-white" style="width: 100%;border-radius: 20rpx;box-shadow: 1px 1px 10px #F5F5F5">
			<view class="flex flex-row align-center">
				<text style="font-size: 32rpx;font-weight: bold;">联系方式</text>
			</view>
			<view class="flex flex-row mt-1 ">
				<view class="flex flex-column mt-1 justify-center ">
					<view class="flex flex-row justify-center">
						<text class="font-28">我的微信号：{{user.weixin || '未设置'}}</text>
						<view v-if="user.weixin" @click="copyWeixin('weixin')" class="flex flex-row align-center px-2 py-1 ml-1" style="background-image:linear-gradient(to right, #3d86f4 0%,#3d86f4 100%);border-radius: 50rpx;">
							<text class="" style="font-size: 24rpx;color: #fff;line-height:30rpx">交换微信</text>
						</view>
					</view>
					<view class="mt-2" v-if="user.weixin_img" @click="showWeixinQRcode" style="width: 300rpx;height: 300rpx;background-color: #F6F6F6;border: 4rpx solid #F3F3F3;">
						<image style="width: 300rpx;height: 300rpx;" class="rounded" :src="config.imgUrl + user.weixin_img"></image>
						<view class="flex flex-column position-absolute-full align-center justify-center">
							<view class="flex flex-row align-center px-1 py-1 rounded" style="background-color: rgba(0,0,0,0.5);">
								<text class="ml-1" style="font-size: 24rpx;color: #fff;">查看微信二维码</text>
							</view>
						</view> 
					</view>
				</view>
				
			</view>
		</view>
	</view>
	 <view class="mt-3 mx-3 flex flex-column align-center justify-center ">
		<view class="px-2 py-3 bg-white" style="width: 100%;border-radius: 20rpx;box-shadow: 1px 1px 10px #F6F8F7">
			<view class="flex flex-row align-center">
				<text style="font-size: 32rpx;font-weight: bold;">关于我</text>
			</view>
			<view class="flex flex-row mt-1  pb-3 justify-center">
				<view>
				<!-- 	<text class="font-28">我的微信号</text> -->
				</view>
			</view>
		</view>
	</view>
	
	<view style="height: 200rpx;"></view>
 </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'

 let app = {}
 // #ifdef MP-WEIXIN || MP-KUAISHOU
 app = getApp({ allowDefault: true}).$vm
 // #endif
 // #ifdef APP-PLUS || H5
 app = getApp({allowDefault: true})
 // #endif

  export default {
	  props: {
	  	user: [Object],
	  },
    data() {
      return {
		background: ['color1', 'color2', 'color3'],
		indicatorDots: true,
		autoplay: false,
		interval: 2000,
		duration: 500,
		images:["https://img0.baidu.com/it/u=108987403,805954568&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=720",'https://img0.baidu.com/it/u=2682889528,126286704&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=854','https://img0.baidu.com/it/u=3414415240,1801795168&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750']
	  }
    },
    computed: {
      ...mapState([
        'systemInfo',
		'config',
		'userInfo'
      ]),
      pageStyles() {
        return {
          wrap: app.$getThemeStyle(['bg-color--1'])
        }
      },
    },
	filters:{
		/* transformDistance(lat1, lon1, lat2, lon2) {
			return uni.$utils.transformDistance(lat1, lon1, lat2, lon2)
		}, */
	},
    created() {
      this.$em = app.$em
    },
    methods: {
		transformDistance(user) {
			return uni.$utils.transformDistance(user.latitude,user.longitude, this.userInfo.latitude,this.userInfo.longitude)
		},
		copyWeixin(){
			
			/* this.$refs['em-idcheck-popup'].open({
						  title:"实名验证",
						  cancelText:"暂不",
						  cancel:()=>{
							  
						  },
						  confirm:(res)=>{
							uni.$http.post("/api/User/eidcheck",{
								name:res.name,
								idcard:res.idcard
							})
							.then(res=>{
								console.log("res",res)
								uni.hideLoading()
								uni.showToast({
								  title: '验证成功',
								  icon: 'none',
								})
								this.$refs['em-idcheck-popup'].close()
							})
							.catch(err=>{
								console.log("err",err)
								uni.hideLoading()
							})  
						  }
			}) */
			
			uni.$http.get("/api/Chat/createroom1v1",{
				fid:this.user.id,
			})
			.then(res=>{
				console.log("res",res)
				let room_id = res.data.id;
				uni.$http.post("/api/chat/sendweixin",{
					room_id:room_id,
				}).then(res1 =>{
					setTimeout(function() {  
						uni.showToast({
							title: '申请已发送',
							icon:'none',
							duration: 2000
						});
					}, 10);
					this.$emit("onChat",room_id)
					uni.hideLoading()
				}).catch(err=>{
					uni.hideLoading()
				})
				//this.$refs['message-popup'].open({room_id:res.data.id})
			})
			.catch(err=>{
				console.log("err",err)
				uni.hideLoading()
			})
		},
		showWeixinQRcode(){
			uni.previewImage({
					urls: [ this.config.imgUrl + this.user.weixin_img],
					longPressActions: {
						// itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							//console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
			});

		}
	}
  }
</script>

<style>
	.container{
		width: 750rpx;
	}
	.swiper{
		width: 750rpx;
	}
	.swiper-item {
		display: block;
		text-align: center;
	}
.border-bottom {
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: #E7E6EB;
}
.auth-button {
  font-family: "Helvetica", Arial, sans-serif;
  border: none;
  border-radius: 22px;
  transition: 0.5s;
  background-size: 250%;
  background-image: linear-gradient(322.24deg, #3d86f4, #D3CEFC 50%, #3d86f4 75%);
   box-shadow: 0px 0px 5px #D3CEFC, 0px 1.25px 1.25px -0.25px #3d86f4, inset 1px 1px 2px #D3CEFC, inset -1px -1px 2px #6082B6;

}
</style>